<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        width: 668px;
        height: 39px;
        /* background-color: black; */
        margin: 100px auto;
    }
    .box .item {
        position: relative;
        float: left;
        background-color: #fff;
        margin-right: 7px;
        height: 100%;
        line-height: 39px;
        /* overflow: hidden; */
    }
    .box .item  a{
        color: #666;
        padding: 0 13px;
        display: block;
        border: 1px solid #ccc;
        height: 100%;
        text-align: center;
        text-decoration: none;
    }
    .item .tips {
        position: absolute;
        width: 250px;
        height: 36px;
        padding: 5px 10px;
        /* box-sizing: border-box; */
        border: 1px solid #ccc;
        color: #666;
        background-color: #ffffff;
        /* text-align: center; */
        line-height: 36px;
        display: none;
        font-size: 12px;
    }
    .item:hover .tips {
        display: block;
    }
    .item:hover .current {
        border:1px solid #e3393c;
    }
    .active {
        border:1px solid #e3393c;
    }
    .text {
        width: 150px;
        height:80px;
        background-color: #33f8ff;
        color: #fff;
        font-size: 25px;
        text-align: center;
        line-height: 80px;
        margin: 0 auto;
        display: none;
    }
</style>
<body>
    <div class="box">
        <div class="item">
            <a href="javascript:;" class="current">不分期</a>
            <div class="tips">无服务费</div>
        </div>
        <div class="item">
            <a href="javascript:;" class="current">￥33.35 x 3期</a>
            <div class="tips">含服务费：feilv0.35%，￥0.35X3期</div>
        </div>
        <div class="item">
            <a href="javascript:;" class="current">￥16.85 x 6期</a>
            <div class="tips">含服务费：feilv0.35%，￥0.35X3期</div>
        </div>
        <div class="item">
            <a href="javascript:;" class="current">￥8.60 x 12期</a>
            <div class="tips">含服务费：feilv0.35%，￥0.35X3期</div>
        </div>
        <div class="item">
            <a href="javascript:;" class="current">￥4.51 x 24期</a>
            <div class="tips">含服务费：feilv0.35%，￥0.35X3期</div>
        </div>
    </div>
    <div class="text">打白条</div>



    <script src="jQuery.js"></script>
    <script>
        $('.item').click(function() {
            var a = $('.item').index(this);
            console.log($('.item').eq(a).is('.active'));
            if( $('.item').eq(a).is('.active')){
               $(this).removeClass('active').siblings().removeClass('active');
            $('.text').hide();
            }else{
             $(this).addClass('active').siblings().removeClass('active');
            $('.text').show();
            }
           
        });

    </script>
</body>
</html>